<template>
    <v-layout>
      <template #header>
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-button type="danger" @click="toDel()">删除</el-button>
      </template>
      <v-table url="/table" ref="tableRef">
        <v-column auto type="selection"></v-column>
        <v-column auto prop="field1" label="字段1"></v-column>
        <v-column auto prop="field2" label="字段2"></v-column>
        <v-column auto label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="toUp(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="toDel(row)"
              >删除</el-button
            >
          </template>
        </v-column>
      </v-table>
    </v-layout>
  
    <v-dialog
      v-model="addVisible"
      title="新增"
      width="400px"
      @confirm="add"
      :action-loading="addLoading"
      @closed="addReset"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-position="top"
      >
        <el-form-item prop="field1" label="字段1">
          <el-input placeholder="请输入字段1" v-model="addForm.field1"></el-input>
        </el-form-item>
        <el-form-item prop="field2" label="字段2">
          <el-input placeholder="请输入字段2" v-model="addForm.field2"></el-input>
        </el-form-item>
      </el-form>
    </v-dialog>
    <v-dialog
      v-model="upVisible"
      title="编辑"
      width="400px"
      @confirm="up"
      :action-loading="upLoading"
      @closed="upReset"
    >
      <el-form
        :model="upForm"
        :rules="rules"
        ref="upFormRef"
        label-position="top"
      >
        <el-form-item prop="field1" label="字段1">
          <el-input placeholder="请输入字段1" v-model="upForm.field1"></el-input>
        </el-form-item>
        <el-form-item prop="field2" label="字段2">
          <el-input placeholder="请输入字段2" v-model="upForm.field2"></el-input>
        </el-form-item>
      </el-form>
    </v-dialog>
  </template>
  
  <script setup lang="ts">
  import { useTable } from "@/components/table/useTable";
  import { useSubmit } from "@/hooks/useSubmit";
  import { Delete } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox, type FormRules } from "element-plus";
  import { markRaw, reactive, ref } from "vue";
  
  interface Data {
    field1: string;
    field2: string;
  }
  
  const rules: FormRules = {
    field1: [
      { required: true, message: "字段1不能为空", trigger: "change" },
      { min: 1, max: 10, message: "字段1长度1-10位", trigger: "change" },
    ],
    field2: [{ required: true, message: "字段2不能为空", trigger: "change" }],
  };
  
  const { tableRef, getSelectionRows, reload } = useTable();
  
  // 新增
  const addForm = reactive<Data>({
    field1: "",
    field2: "",
  });
  const addVisible = ref(false);
  const toAdd = () => {
    addVisible.value = true;
  };
  const {
    loading: addLoading,
    submit: add,
    formRef: addFormRef,
    reset: addReset,
  } = useSubmit({
    form: addForm,
    ajax: async () => {
       // eg: await insert('/delete');
      ElMessage.success("添加职务信息成功");
      reload();
      addVisible.value = false;
    },
  });
  
  // 编辑
  const upForm = reactive<Data>({
    field1: "",
    field2: "",
  });
  const upVisible = ref(false);
  const toUp = (row: Data) => {
    upVisible.value = true;
    upForm.field2 = row.field2;
    upForm.field1 = row.field1;
  };
  const {
    loading: upLoading,
    submit: up,
    formRef: upFormRef,
    reset: upReset,
  } = useSubmit({
    form: upForm,
    ajax: async () => {
       // eg: await fetch('/update');
      ElMessage.success("编辑职务信息成功");
      reload();
      upVisible.value = false;
    },
  });
  
  // 删除
  const toDel = (row?: Data) => {
    let delRows: Data[] = [];
    if (row) {
      // 单选删除
      delRows.push(row);
    } else {
      // 多选删除
      const selection = getSelectionRows();
      if (!selection || !selection.length) {
        ElMessage.warning("至少选择一条数据");
        return;
      }
      delRows = selection;
    }
    console.log(delRows);
    ElMessageBox.confirm("数据将被永久删除，是否确定？", "提示", {
      type: "warning",
      icon: markRaw(Delete),
      async callback(action: string) {
        if (action === "confirm") {
          // 发送删除请求
          // eg: await fetch('/delete');
          ElMessage.success("删除职务信息成功");
          reload();
        }
      },
    });
  };
  </script>